<template>
  <div>
    <el-input size="small" placeholder="输入关键字进行过滤" style="width: 50%" v-model="filterText"> </el-input>
    <div style="margin-top:10px"></div>
    <el-tree
      :multiple="multiple"
      :data="data"
      :check-strictly="true" 
      :props="defaultProps"
      :default-expand-all="false"
      :accordion="false"
      ref="tree"
      node-key="id"
      show-checkbox
      :default-expanded-keys="expandedKeys"
      :default-checked-keys="checkedKeys"
      highlight-current
      :filter-node-method="filterNode"
      @check-change="checkChange"
      @check="checks"
    >
    </el-tree>
  </div>
</template>

<script>
import { useSystemApi } from "@/api/systemApi";

export default {
  props: {
    // 默认多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // c传入label 数组处理
    echoCheckedLabel: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 传入value
    echoCheckedValue: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      expandedKeys: [], // 数据回显
      checkedKeys: [], // 数据回显
      // checkedKeys: [],  // 数据回显
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      filterText: '',
      checkedList: []  // 保存选中的值
    };
  },
  created() {
    this.getCompanySelect();
  },
  methods: {
    // 获取接口数据
    getCompanySelect() {
      useSystemApi().apiDpUserTree({COMPANYID: ''}).then((res) => {
        this.data = res.info;
        // console.log(this.echoCheckedLabel, 'echoCheckedLabel--回显')
        if (this.echoCheckedLabel.length !== 0) {
          const result = this.findFields(this.data, this.echoCheckedLabel);
          // console.log(result, 'result')
          this.expandedKeys = result.map((i) => {return i.id})
          this.checkedKeys = result.map((i) => {return i.id})
        } else {
          // this.echoCheckedLabel = []
        }
        if (this.echoCheckedValue.length !== 0) {
          this.expandedKeys = this.echoCheckedValue
          this.checkedKeys = this.echoCheckedValue
        } else {
          // this.expandedKeys = []
          // this.checkedKeys = []
        }
      });
      
    },
    // 多选
    checks(val, node) {
      if (!this.multiple) return false
      this.checkedList = node.checkedNodes
      this.$emit('setCheckedList', this.checkedList)
    },
    // 单选
    checkChange(item, node) {
      this.checkedList = []
      if (this.multiple) return false
      // return
      if (node === true) {
        // 点击未选中复选框
        this.$refs.tree.setCheckedKeys([item.id]); // 单选
        this.checkedList.push(item)
        this.$emit('setCheckedList', this.checkedList)
      }
    },
    filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
    },
    findFields(data, fields) {
      let result = [];
      function search(children) {
        for (let i = 0; i < children.length; i++) {
          const child = children[i];

          if (fields.includes(child.label)) {
            result.push(child);
          }

          if (child.children) {
            search(child.children);
          }
        }
      }
      search(data);
      return result;
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
};
</script>

<style></style>